<template>
  <div>
    <el-form ref="activityRemarkRefForm" :model="activityRemarkQuery" label-width="120px" :rules="activityRemarkRules">
      <el-form-item label="ID">
        <div class="desc">&nbsp;{{ activityDetail.id }}</div>
      </el-form-item>
      <el-form-item label="负责人">
        <div class="desc">&nbsp;{{ activityDetail.ownerDo.name }}</div>
      </el-form-item>
      <el-form-item label="活动名称">
        <div class="desc">&nbsp;{{ activityDetail.name }}</div>
      </el-form-item>
      <el-form-item label="开始时间">
        <div class="desc">&nbsp;{{ activityDetail.startTime }}</div>
      </el-form-item>
      <el-form-item label="结束时间">
        <div class="desc">&nbsp;{{ activityDetail.endTime }}</div>
      </el-form-item>
      <el-form-item label="活动预算">
        <div class="desc">&nbsp;{{ activityDetail.cost }}</div>
      </el-form-item>
      <el-form-item label="活动描述">
        <div class="desc">&nbsp;{{ activityDetail.description }}</div>
      </el-form-item>
      <el-form-item label="创建时间">
        <div class="desc">&nbsp;{{ activityDetail.createTime }}</div>
      </el-form-item>
      <el-form-item label="创建人">
        <div class="desc">&nbsp;{{ activityDetail.createByDo.name }}</div>
      </el-form-item>
      <el-form-item label="编辑时间">
        <div class="desc">&nbsp;{{ activityDetail.editTime }}</div>
      </el-form-item>
      <el-form-item label="编辑人">
        <div class="desc">&nbsp;{{ activityDetail.editByDo.name }}</div>
      </el-form-item>
      <el-form-item label="填写备注" prop="noteContent">
        <el-input
          v-model="activityRemarkQuery.noteContent"
          type="textarea"
          :rows="8"
          placeholder="请填写备注"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="activityRemarkSubmit">提 交</el-button>
        <el-button @click="goback">返 回</el-button>
      </el-form-item>
    </el-form>

    <!-- 分割线 -->
    <el-divider />
    <el-table
      :data="activityRemarkList"
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column property="noteContent" label="备注内容" show-overflow-tooltip />
      <el-table-column property="createTime" label="备注时间" />
      <el-table-column property="createByDo.name" label="备注人" />
      <el-table-column property="editTime" label="编辑时间" />
      <el-table-column property="editByDo.name" label="编辑人" />
      <el-table-column label="操作" align="center">
        <!-- 作用域插槽 -->
        <template #default="scope">
          <el-button link type="success" size="small" @click="edit(scope.row.id)">编辑</el-button>
          <el-button link type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"
    />

    <!-- 活动备注记录弹窗 -->
    <el-dialog v-model="activityRemarkDialogVisible" title="编辑市场活动备注记录" width="55%" center draggable>
      <el-form ref="editActivityRemarkRefForm" :model="editActivityRemarkQuery" label-width="110px" :rules="editActivityRemarkRules">
        <el-form-item label="活动备注" prop="noteContent">
          <el-input
            v-model="editActivityRemarkQuery.noteContent"
            type="textarea"
            :rows="8"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="activityRemarkDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="editActivityRemarkSubmit">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { doGet, doPost, doPut, doDelete } from '../http/httpRequest'
import { goback, messageTip, messageConfirm } from '../util/util'

export default {
  name: 'ActivityDetailView',
  inject: ['reload'],
  data() {
    return {
      // 活动详情对象
      activityDetail: {
        ownerDo: {},
        createByDo: {},
        editByDo: {}
      },
      // 市场活动备注对象
      activityRemarkQuery: {},
      activityRemarkRules: {
        noteContent: [
          { required: true, message: '活动备注不能为空', trigger: 'blur' },
          { min: 5, max: 255, message: '活动备注长度为5~255个字符', trigger: 'blur' }
        ]
      },
      // 活动备注的列表对象
      activityRemarkList: [{
        createByDo: {},
        editByDo: {}
      }],
      pageSize: 0,
      total: 0,
      editActivityRemarkQuery: {},
      // 编辑活动备注的验证规则
      editActivityRemarkRules: {
        noteContent: [
          { required: true, message: '活动备注不能为空', trigger: 'blur' },
          { min: 5, max: 255, message: '活动备注长度为5~255个字符', trigger: 'blur' }
        ]
      },
      // 编辑活动备注的弹窗
      activityRemarkDialogVisible: false
    }
  },
  mounted() {
    this.loadActivityDetail()
    this.loadActivityRemarkList(1)
  },
  methods: {
    // 删除活动备注
    del(id) {
      messageConfirm('您确定要删除该数据吗?').then(() => {
        doDelete('/api/activity/remark/' + id, {}).then(resp => {
          if(resp.data.code === 200) {
            messageTip('删除成功', 'success')
            this.reload()
          } else {
            messageTip('删除失败, 原因: ' + resp.data.msg, 'error')
          }
        })
      }).catch(() => {
        messageTip('取消删除', 'warning')
      })
    },
    // 编辑
    edit(id) {
      this.activityRemarkDialogVisible = true
      doGet('/api/activity/remark/' + id, {}).then(resp => {
        if(resp.data.code === 200) {
          this.editActivityRemarkQuery = resp.data.data
        }
      })
    },
    editActivityRemarkSubmit() {
      this.$refs.editActivityRemarkRefForm.validate(isValid => {
        if (isValid) {
          doPut('/api/activity/remark', {
            id: this.editActivityRemarkQuery.id,
            noteContent: this.editActivityRemarkQuery.noteContent
          }).then(resp => {
            if(resp.data.code === 200) {
              messageTip('编辑成功', 'success')
              this.reload()
            } else {
              messageTip('编辑失败', 'error')
            }
          })
        }
      })
    },
    loadActivityRemarkList(current) {
      doGet('/api/activity/remark', {
        current: current,
        activityId: this.$route.params.id
      }).then(resp => {
        console.log(resp);
        if(resp.data.code === 200) {
          this.activityRemarkList = resp.data.data.list
          this.pageSize = resp.data.data.pageSize
          this.total = resp.data.data.total
        }
      })
    },
    // 分页函数
    toPage(current) {
      this.loadActivityRemarkList(current)
    },
    // 提交活动备注
    activityRemarkSubmit() {
      this.$refs.activityRemarkRefForm.validate(isValid => {
        if(isValid) {
          doPost('/api/activity/remark', {
            activityId: this.activityDetail.id,
            noteContent: this.activityRemarkQuery.noteContent
          }).then(resp => {
            if(resp.data.code === 200) {
              messageTip('提交成功', 'success')
              this.reload()
            } else {
              messageTip('提交失败', 'error')
            }
          })
        }
      })
    },
    // 返回
    goback,

    // 加载市场活动详情
    loadActivityDetail() {
      let id = this.$route.params.id
      doGet('/api/activity/' + id, {}).then(resp => {
        if(resp.data.code === 200) {
          this.activityDetail = resp.data.data
          if(!this.activityDetail.ownerDo) {
            this.activityDetail.ownerDo = {}
          }
          if(!this.activityDetail.createByDo) {
            this.activityDetail.createByDo = {}
          }
          if(!this.activityDetail.editByDo) {
            this.activityDetail.editByDo = {}
          }
        }
      })
    }
  }
}
</script>

<style scoped>
  .desc {
    background-color: #f0ffff;
    width: 100%;
    padding-left: 15px;
  }
</style>